<template>
  <div class="login">
    <div id="login-box">
      <div class="login-banner">
        <!-- <div class="logo" /> -->
        <img src="../assets/404.png" class="banner">
      </div>
      <el-form v-show="formType == 'login'" ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" @submit.native.prevent>
        <div class="title-container">
          <h3 class="title">内江师范学院学生管理系统</h3>
        </div>
        <div>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" ref="password" v-model="loginForm.password" type="password" placeholder="密码" :show-password="true" autocomplete="on" @keyup.enter="toLogin" ></el-input>
          </el-form-item>
        </div>
        <div class="flex-bar">
          <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
          <!-- <el-link type="primary" :underline="false" @click="formType = 'reset'">忘记密码了?</el-link> -->
        </div>
        <el-button :loading="loading" type="primary" size="large" style="width: 100%;" @click.prevent="toLogin">登录</el-button>
      </el-form>
    </div>

  </div>
</template>

<script>
import router from "@/router";

export default {
  data() {
    return {
      formType: "login",
      loginForm: {
        password: localStorage.getItem("password"),
        remember: true,
      },
      passwordType: "eye",
      loading: false,
      loginRules: {
        password: [
          { required: true, trigger: "blur", message: "请输入密码" },
          { min: 6, max: 18, trigger: "blur", message: "密码长度为6到18位" },
        ],
      },
    };
  },
  mounted() {
    window.addEventListener('keydown',this.keyDown);
  },
  methods: {
    keyDown(e) {
      // 回车执行登录方法
      if (e.keyCode === 13 || e.keyCode === 108) {
        this.toLogin();
      }
    },
    toLogin() {
      this.$refs.loginFormRef.validate().then(() => {
        //开启加载动画
        this.loading = true;
        //封装请求参数
        let params = new URLSearchParams();
        params.append('password', this.loginForm.password)
        //登录
        this.$ajax.post(this.$api + "/login", params)
          .then((res) => {
            //登录成功
            if (res.data.code === 20000) {
              this.$message({
                message: "登录成功",
                type: "success",
              });
              //保存token
              localStorage.setItem("access_token", res.data.accessToken);
              //检查是否勾选记住密码
              if (this.loginForm.remember === true) {
                localStorage.setItem("password", this.loginForm.password);
              } else {
                localStorage.removeItem("password");
              }
              setTimeout(function () {
                //隐藏加载动画
                this.loading = false;
                //跳转首页
                router.push({
                  path: "/home",
                });
              }, 1000);
            }
            //登录失败
            else {
              this.loading = false;
              this.$message({
                dangerouslyUseHTMLString: true,
                message: "登录失败<br>"+ res.data.ipInfo.accessTime + " " + res.data.ipInfo.remarks + "<br><strong>您(IP:" + res.data.ipInfo.outerIp + " " + res.data.ipInfo.location + ")的本次异常操作已被记录在案。</strong>",
                type: "error",
                duration: 10000
              });
            }
          })
          .catch((error) => {
            //隐藏加载动画
            this.loading = false;
            console.log(error);
          });
      });
    }
  },
};
</script>

<style lang="less" scoped>
#login-box {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--el-bg-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--el-box-shadow);
  .login-banner {
    position: relative;
    width: 450px;
    background-color: var(--el-fill-color-light);
    .banner {
      width: calc(100% + 100px);
      right: -50px;
      @include position-center(y);
    }
  }
  .login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 400px;
    width: 400px;
    padding: 50px;
    overflow: hidden;
    .title-container {
      position: relative;
      .title {
        font-size: 1.3em;
        color: var(--el-text-color-primary);
        margin: 0 auto 30px;
        font-weight: bold;
      }
    }
  }
  .el-form-item {
    margin-bottom: 24px;
    ::v-deep(.el-input) {
      height: 48px;
      line-height: inherit;
      width: 100%;
      input {
        height: 48px;
      }
      .el-input__prefix,
      .el-input__suffix {
        display: flex;
        align-items: center;
      }
      .el-input__prefix {
        left: 10px;
      }
      .el-input__suffix {
        right: 10px;
      }
    }
  }
  .flex-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
</style>